<template>
  <div id="screen">
    <div id="main">
      <div class="top">
        燕燕于飞，差池其羽。之子于归，远送于野。瞻望弗及，泣涕如雨。
        燕燕于飞，颉之颃之。之子于归，远于将之。瞻望弗及，伫立以泣。
        燕燕于飞，下上其音。之子于归，远送于南。瞻望弗及，实劳我心。
        仲氏任只，其心塞渊。终温且惠，淑慎其身。先君之思，以勖寡人。
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style scoped>
#screen {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /*background-color:rgb(228, 180, 180);*/
  /*overflow: hidden;  */
  /*overflow: auto;*/

}


@media screen and (orientation: portrait) {
  /*竖屏*/
  #main {
    position: absolute;
    width: 100vh;
    height: 100vw;
    top: 0;
    left: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0% 0%;
    /*border: 1px solid green;*/
    /*background: yellow;*/
  }

  .top {
    width: 100%;
    height: 60px;
    /*background: red;*/
  }
}

@media screen and (orientation: landscape) {
  /*手机开启横屏*/
  #main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*border: 1px solid red;*/
    /*background:deepskyblue;*/

  }

  .top {
    width: 100%;
    height: 60px;
    /*background: lightskyblue;*/
  }
}
</style>